<!-- 员工自助  -->
<template>
  <!-- 右侧内容主体区域 -->
  <div style="height: 100%; min-height: 235px;">
    <table style="cursor: pointer;">
      <thead>
      <tr>
        <th style="width:25%"></th>
        <th style="width:25%"></th>
        <th style="width: 20.0472%;"></th>
        <th style="width: 29.9528%;"></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td colspan="3" rowspan="2">
          <div class="pstaff">
            <div class="item"
                 style="margin: 10px 0px 0px 10px;
                       position: static; width: auto; height: auto; left: 10.0093px; top: 120.002px; z-index: 1;">
              <div class="content" style="width: auto;">
                <div style="height: 330px">
                  <el-card class="box-card">
                    <el-tabs  v-model="activeName" class="demo-tabs">
                      <el-tab-pane label="常用功能" name="first">
                        <ul>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/zaizhizhengming.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工在职证明
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank" @click="onOjp">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                考勤异常调整
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工费用报销
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工转正申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工用车申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </el-tab-pane>
                      <el-tab-pane label="财务流程" name="second">
                        <ul>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工费用报销
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                活动费申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工采购申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li style="visibility: hidden;">
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li style="visibility: hidden;">
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li style="visibility: hidden;">
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </el-tab-pane>
                      <el-tab-pane label="人事流程" name="third">
                        <ul>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工在职证明
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank" @click="onOjp">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/lizhizhengming.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工离职证明
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/yuangongqingjia.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工请假申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工转正申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工出差申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/empCt.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工调岗申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank" @click="this.$router.push({path: '/ct' })">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </el-tab-pane>
                      <el-tab-pane label="行政流程" name="fourth">
                        <ul>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/empResign.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工离职申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank" @click="crlink">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工用车申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                员工宿舍申请
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li style="visibility: hidden;">
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                          <li style="visibility: hidden;">
                            <div class="" style="width: 30%;">
                              <img src="@/assets/img/personnelImage/OfficeSupplies.png" class="rounded"></div>
                            <div class="" style="width: 70%;">
                              <p class="word-jcon-flex">
                                办公用品领用
                              </p>
                              <div class="flex">
                                <a class="filleta" target="_blank">立即办理</a>
                                <a class="filleta" target="_blank"
                                   style="background-color: rgb(218, 230, 249); color: rgb(0, 93, 188);">办理指南</a>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </el-tab-pane>
                    </el-tabs>
                  </el-card>
                </div>
              </div>
            </div>
            <div class="item"
                 style="margin: 50px 0px 10px 10px; position: relative;">
              <div class="content" style="width: auto;margin-top: -4.5em">
                <div class="content_view" style="height: 420px;">
                  <el-card class="box-card">
                    <div style="margin-bottom: 1.7em">
                      <font class="title-font">办理进度</font>
                    </div>
                    <el-tabs  class="demo-tabs">
                      <div label="入职" name="first">
                        <el-table :data="tableData" style="width: 100%;font-size: 10px;margin-left: -1em;"
                                  height="250"
                                  :header-cell-style="{background:'rgb(242,245,249)',color:'#606266'}">
                          <el-table-column prop="date" label="流程标题" min-width="32%"/>
<!--                          <el-table-column prop="name" label="流程类型" min-width="12%"/>-->
                          <el-table-column prop="state" label="发起人" min-width="12%"/>
                          <el-table-column prop="city" label="发起时间" min-width="12%"/>
                          <el-table-column prop="address" label="操作" min-width="12%"/>
                        </el-table>
                      </div>
                    </el-tabs>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td colspan="1" rowspan="2">
          <div style="position: relative;top: -16.7em;">
            <div class="item" style="margin: 10px 10px 0px 10px; position: relative;">
              <el-card class="box-card">
                <div class="flex justify-between">
                  <div class=" flex items-center rightImg">
                    <img src="@/assets/img/personnelImage/人事默认头像.png">
                    <div class="rightOverall">
                        <p class="rightOverall-p"><span>
                          {{this.$store.state.loginUser.empName}}
                        </span>，欢迎访问办事大厅</p>
                        <div class="flex items-center rightOverall-phone">
                          <img src="@/assets/img/personnelImage/手机.png" style="width: 12px; height: 20px;">
                          <p style="color: rgb(175, 175, 175);">
                            {{this.$store.state.loginUser.concatPhone}}
                          </p>
                        </div>
                        <div class="flex items-center rightOverall-email">
                          <img src="@/assets/img/personnelImage/邮件.png" style="width: 18px; height: 13px;">
                          <p style="color: rgb(175, 175, 175);">2831822123@qq.com</p>
                        </div>
                        <div class="flex items-center rightOverall-message">
                          <ul class="flex justify-between items-center">
                            <li class="text-center ">
                              <p style="color: rgb(149, 149, 149);">入司时间</p>
                              <p style="color: rgb(16, 52, 161); font-size: 18px; font-weight: 500;">
                                <span style="color: rgb(16, 52, 161); font-size: 12px;">
                                  {{this.$store.state.loginUser.hireDate}}
                                </span>
                              </p>
                            </li>
                            <li class="text-center ">
                              <p style="color: rgb(149, 149, 149);">部门</p>
                              <p style="color: rgb(16, 52, 161); font-size: 18px; font-weight: 500;">
                                <span style="color: rgb(16, 52, 161); font-size: 12px;">
                                   {{this.$store.state.loginUser.dept}}
                                </span>
                              </p>
                            </li>
                            <li class="text-center ">
                              <p style="color: rgb(149, 149, 149);">职务类型</p>
                              <p style="color: rgb(16, 52, 161); font-size: 18px; font-weight: 500;">
                                <span style="color: rgb(16, 52, 161); font-size: 12px;">
                                   {{this.$store.state.loginUser.position}}
                                </span>
                              </p>
                            </li>
                          </ul>
                        </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
      </tr>
      <tr>
        <td colspan="4" rowspan="1">
          <div class="item mar-top">
              <div style="width: auto; position: relative;">
              <div  class="title-font">
                <font>自助查询</font>
              </div>
              <el-card>
                <ul class="Element_businessCreate">
                  <li>
                  <h3>人事相关</h3>
                    <div>
                      <a target="_blank">通讯录</a><router-link to="/pcl">我的考勤</router-link>
                      <a target="_blank" @click="this.$router.push({path: '/per/emp/calendars'})">我的排班</a>
                      <a target="_blank">我的年假</a>
                      <a target="_blank">我的培训</a><a target="_blank">我的绩效</a>
                      <a target="_blank">我的工资</a><a target="_blank">我的奖惩</a>
                      <a target="_blank">我的个税</a>
                  </div>
                  </li>
                  <li>
                    <h3>行政相关</h3>
                  <div><a target="_blank">我的资产</a><a target="_blank">我的会议</a>
                    <a target="_blank">客户接待</a><a target="_blank">会议室查询</a>
                    <a target="_blank">访客查询</a><a target="_blank">物料查询</a>
                    <a target="_blank">班车查询</a><a target="_blank">每日菜单</a>
                    <a target="_blank">停车指南</a>
                  </div>
                  </li>
                  <li>
                    <h3>费用相关</h3>
                  <div><a target="_blank">我的发票</a><a target="_blank">我的报销</a>
                    <a target="_blank">我的商旅</a><a target="_blank">费用标准</a>
                    <a target="_blank">预算查询</a><a target="_blank">凭证查询</a>
                    <a target="_blank">我的借款</a><a target="_blank">我的付款</a>
                    <a target="_blank">我的请款</a>
                  </div>
                  </li>
                </ul>
              </el-card>
            </div>
          </div>
        </td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
        <td rowspan="1" colspan="1" style="display: none;"></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {selOjp} from "../../network/per/proveMuster";

export default {
  name: "selfService",
  data() {
    return {
      activeName :'first',
      empId:this.$store.state.loginUser.id
    }
  },
  methods:{
    crlink(){
      if (this.empId === null || this.empId === undefined){
        this.$message({
          message: '请登录后重试！',
          type: 'warning'
        });
        return
      }
      this.$router.push({
        path: '/cr'
      })
    },
    onOjp(){
      if (this.empId === null || this.empId === undefined){
        this.$message({
          message: '请登录后重试！',
          type: 'warning'
        });
        return
      }
      selOjp(this.empId).then((das)=>{
        console.log("查询员工 " ,das)
        if (das.code === 200){
          let lcArr = JSON.stringify(das.data);
          this.$router.push({
            path: '/ojp',
            query: {lcArr: encodeURIComponent(lcArr)}
          })
        }else{
          this.$notify({
            title: '失败',
            message: '你已离职或合同过期了',
            type: 'error'
          })
        }
      })
   }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/css/personnelCss/pselfService";
</style>
